<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>分类</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
<#--<link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">-->
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/master.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/idangerous.swiper.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_c2fouqhk6na5rk9.css">
    <style>
        .car-btn {
            position: absolute !important;
            right: 10px;
            line-height: 22px !important;
        }

        .title {
            margin-left: 0;
        }

        .imgHeader img {
            height: 10rem;
            width: 100%;
        }

        .btn-block {
            height: 9.5rem;
            margin: 10px 0;
            background: #FFFFFF;
        }

        .btn-block div {
            width: 25%;
            height: 3.5rem;
            float: left;
            margin-top: 0.75rem;
        }

        .btn-block img {
            width: 2.45rem;
            height: 2.45rem;
            margin: 0 22%;
        }

        .btn-block p {
            font-size: 14px;
            text-align: center;
            margin: 0.2rem 0 0 0;
            padding: 0;
        }

        .product-block {
            background-color: #FFFFFF;
            height: 100%;
            width: 100%;
        }

        .product-block .guess {
            height: 2rem;
            width: 50%;
            margin: 0 25%;
        }

        .product-block .guess img {
            float: left;
            width: 15%;
            margin-top: 16px;
            margin-left: 4%;
        }

        .product-block .guess .love-img {
            width: 0.95rem;
            height: 1rem;
            margin-top: 10px;
        }

        .product-block .guess p {
            float: left;
            padding: 0;
            font-size: 16px;
            line-height: 40px;
            color: #00b0ec;
            margin: 0 0 0 4%;
        }

        .product-block .card {
            margin: 0;
            padding: 0;
            box-shadow: none;
        }

        .product-block .card-content {
            height: 12rem;
            width: 49%;
            float: left;
        }

        .product-block .card-content:first-child {
            margin-right: 2%;
        }

        .product-block .card-content .item-text {
            margin-top: 0.5rem;
            font-size: 12px;
        }

        .product-block .card-content .item-subtitle {
            color: #ff4f00;
            font-size: 14px;
        }

        .product-block .card-content img {
            width: 100%;
        }

        .swiper-wrapper {
            height: auto;
        }

        .swiper-slide img {
            width: 100%;
        }

        .swiper-slide .title {
            font-style: italic;
            font-size: 42px;
            margin-top: 80px;
            margin-bottom: 0;
            line-height: 45px;
        }

        .swiper-pagination {
            position: absolute;
            z-index: 20;
            margin: 0 auto;
            left: 50%;
            bottom: 10px;
        }

        .swiper-pagination-switch {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #222;
            margin-right: 5px;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
        }

        .swiper-visible-switch {
            background: #aaa;
        }

        .swiper-active-switch {
            background: #fff;
        }
    </style>
</head>

<body>
<div class="page-group">
    <div class="page">
        <!--搜索栏内容 !-->
        <header class="bar bar-nav">
            <h1 class="title">
                商城
            </h1>
        </header>
        <div class="content shopping-content">
            <!-- 幻灯片Slider -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!--fn-block!-->
            <div class="btn-block">
                <div>
                    <img src="${staticpath}/front/dist/images/limit-time.png">

                    <p>限时抢购</p>
                </div>
                <div>
                    <img src="${staticpath}/front/dist/images/groups.png">

                    <p>拼团</p>
                </div>
                <div>
                    <img src="${staticpath}/front/dist/images/new.png">

                    <p>新品推荐</p>
                </div>
                <div>
                    <img src="${staticpath}/front/dist/images/volume.png">

                    <p>领卷中心</p>
                </div>
                <div>
                    <img src="${staticpath}/front/dist/images/welfare.png">

                    <p>公益拍卖</p>
                </div>
                <div>
                    <img src="${staticpath}/front/dist/images/love.png">

                    <p>爱心企业</p>
                </div>
                <div>
                    <img src="${staticpath}/front/dist/images/boon.png">

                    <p>福利</p>
                </div>

                <div>
                    <a href="${basepath}/front/catalog/toCatalogList">
                        <img src="${staticpath}/front/dist/images/more.png">

                        <p>全部分类</p>
                    </a>
                </div>
            </div>
            <div class="product-block">
                <div class="guess">
                    <img src="${staticpath}/front/dist/images/blue-left.png">
                    <img src="${staticpath}/front/dist/images/blue-love.png" class="love-img">

                    <p>猜你喜欢</p>
                    <img src="${staticpath}/front/dist/images/blue-right.png">
                </div>
                <div class="product">
                    <div class="card">
                        <div class="card-content">
                            <img src="//img.alicdn.com/bao/uploaded/i3/TB1mLdoQpXXXXXGXVXXXXXXXXXX_!!0-item_pic.jpg_640x640q50.jpg"
                                 class="" data-size="345x347" data-src-checked="true">

                            <div class="item-text">新边界坚果零食奶油味纸皮巴旦木干果大扁桃仁新疆巴达木200g*2袋</div>
                            <div class="item-subtitle">￥25.50</div>
                        </div>
                        <div class="card-content">
                            <img src="//img.alicdn.com/bao/uploaded/i3/TB1ZdmUJVXXXXaVXpXXXXXXXXXX_!!0-item_pic.jpg_640x640q50.jpg"
                                 class="" data-size="345x347" data-src-checked="true">

                            <div class="item-text">小七陈卤 香辣牛肚75gX2零食休闲卤味好吃的年货特色牛肉类小吃</div>
                            <div class="item-subtitle">￥25.50</div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!--工具栏!-->
        <nav class="bar bar-tab" id="tool-bar">
            <a class="tab-item external " href="/toHome">
                <span class="iconfont icon-shouye"></span>

                <p class="tab-label">首页</p>
            </a>
            <a class=" tab-item love-external" href="${basepath}/front/offline/toOfflineList" id="loveBtn">
                <span class="iconfont icon-huodong"></span>

                <p class="tab-label">活动</p>
            </a>
            <a class="tab-item external active" href="${basepath}/front/catalog/toMallList">
                <span class="iconfont iconfont icon-shangcheng"></span>

                <p class="tab-label">商城</p>
            </a>
            <a class="tab-item external" href="${basepath}/front/account/toAccountList">
                <span class="iconfont icon-wo"></span>

                <p class="tab-label">我</p>
            </a>
        </nav>
    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/idangerous.swiper.min.js' charset='utf-8'></script>
<script>

    $.config = {
        router: false
    }
</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/mallList.js' charset='utf-8'></script>
<#--<script type='text/javascript' src='${staticpath}/front/dist/js/liWb/sm-extend.js' charset='utf-8'></script>-->
<script>
    $.init();
</script>
</body>

</html>
